<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>物资需求提交</span>
        </div>
        <el-form-item label="需求标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入需求标题"/>
        </el-form-item>
        <el-form-item label="物资类别" prop="category">
          <el-select v-model="form.category" placeholder="请选择物资类别">
            <el-option
              v-for="category in categoryOptions"
              :key="category.categoryId"
              :label="category.categoryName"
              :value="category.categoryId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="需求数量" prop="quantity">
          <el-input-number v-model="form.quantity" :min="1" :max="99999"/>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入单位（如：个、箱、件）"/>
        </el-form-item>
        <el-form-item label="期望收到日期" prop="expectedDate">
          <el-date-picker
            v-model="form.expectedDate"
            type="date"
            placeholder="选择期望收到日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="需求描述" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            placeholder="请详细描述您的需求"
            :rows="4"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交需求</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-card>
    </el-form>

    <!-- 我的需求列表 -->
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>我的需求列表</span>
      </div>
      <el-table :data="demandList" style="width: 100%">
        <el-table-column prop="title" label="需求标题"/>
        <el-table-column prop="category" label="物资类别"/>
        <el-table-column prop="quantity" label="数量"/>
        <el-table-column prop="unit" label="单位"/>
        <el-table-column prop="expectedDate" label="期望收到日期"/>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="viewDetail(scope.row)"
            >查看详情</el-button>
            <el-button
              size="mini"
              type="text"
              @click="cancelDemand(scope.row)"
              v-if="scope.row.status === '0'"
            >取消申请</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { listAidCategory } from "@/api/aid/category";
import { addAidDemand, listMyDemands, cancelDemand } from "@/api/aid/demand";

export default {
  name: "DemandSubmit",
  data() {
    return {
      // 表单参数
      form: {
        title: undefined,
        category: undefined,
        quantity: 1,
        unit: undefined,
        expectedDate: undefined,
        description: undefined
      },
      // 表单校验
      rules: {
        title: [
          { required: true, message: "需求标题不能为空", trigger: "blur" }
        ],
        category: [
          { required: true, message: "请选择物资类别", trigger: "change" }
        ],
        quantity: [
          { required: true, message: "需求数量不能为空", trigger: "blur" }
        ],
        unit: [
          { required: true, message: "单位不能为空", trigger: "blur" }
        ],
        expectedDate: [
          { required: true, message: "期望收到日期不能为空", trigger: "change" }
        ]
      },
      // 物资类别选项
      categoryOptions: [],
      // 需求列表
      demandList: []
    };
  },
  created() {
    this.getCategoryList();
    this.getMyDemands();
  },
  methods: {
    /** 获取物资类别列表 */
    getCategoryList() {
      listAidCategory().then(response => {
        this.categoryOptions = response.data;
      });
    },
    /** 获取我的需求列表 */
    getMyDemands() {
      listMyDemands().then(response => {
        this.demandList = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addAidDemand(this.form).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.resetForm();
            this.getMyDemands();
          });
        }
      });
    },
    /** 重置按钮 */
    resetForm() {
      this.$refs["form"].resetFields();
    },
    /** 取消需求 */
    cancelDemand(row) {
      this.$modal.confirm('是否确认取消该需求？').then(function() {
        return cancelDemand(row.demandId);
      }).then(() => {
        this.getMyDemands();
        this.$modal.msgSuccess("取消成功");
      });
    },
    /** 查看详情 */
    viewDetail(row) {
      this.$router.push({ path: '/aid/demand/detail/' + row.demandId });
    },
    /** 获取状态样式 */
    getStatusType(status) {
      if (status === '0') return 'info';
      if (status === '1') return 'primary';
      if (status === '2') return 'success';
      if (status === '3') return 'success';
      return 'danger';
    },
    /** 获取状态文本 */
    getStatusText(status) {
      if (status === '0') return '待审核';
      if (status === '1') return '已审核';
      if (status === '2') return '已分配';
      if (status === '3') return '已完成';
      return '已取消';
    }
  }
};
</script> 